<template>
  <view>
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="车辆详情"></van-nav-bar>
    <!-- #endif -->
    <scroll-view class="addcar-wrap" scroll-y="true" :style="styleHeight">
      <!-- <view class="addcar-content">
      <text class="title text-bold">基本信息</text>
      <view class="info">
        <view class="left">
          <view class="test">车牌号</view>
          <view class="test">所有人</view>
          <view class="test">车辆类型</view>
          <view class="test">品牌型号</view>
          <view class="test">车辆识别代码</view>
        </view>
        <view class="right">
          <view class="test1">
            <input
              class="content-input"
              maxlength="30"
              v-model="data.detail.plateNumber"
              @input="changePlateValue"
              placeholder="请输入车牌号" />
          </view>
          <view class="test1">
            <input
              class="content-input"
              v-model="data.detail.owner"
              maxlength="30"
              @input="changeOwnerValue"
              placeholder="请输入所有人" />
          </view>
          <view class="test1">
            <input
              class="content-input"
              v-model="data.detail.type"
              maxlength="30"
              @input="changeTypeValue"
              placeholder="请输入车辆类型" />
          </view>
          <view class="test1">
            <input
              class="content-input"
              v-model="data.detail.model"
              maxlength="30"
              @input="changeModelValue"
              placeholder="请输入品牌型号" />
          </view>
          <view class="test1">
            <input
              class="content-input"
              v-model="data.detail.vin"
              maxlength="30"
              @input="changeVinValue"
              placeholder="请输入车辆识别代码" />
          </view>
        </view>
      </view>
    </view> -->
      <view class="addcar-content">
        <text class="title text-bold">基本信息</text>
        <view class="item">
          <view class="itemname">
            <text class="red">*</text>
            车牌号
          </view>
          <view class="itemname-detail">
            <input
              class="user-input"
              type="text"
              @input="changeVinValue"
              v-model="data.detail.plateNumber"
              maxlength="30"
              placeholder="请输入车牌号"
              placeholder-style="color:#545454;font-size:14px" />
          </view>
        </view>
        <!-- <view class="line"></view> -->
        <view class="item">
          <view class="itemname">所有人</view>
          <view class="itemname-detail">
            <input
              class="user-input"
              type="text"
              @input="changeVinValue"
              v-model="data.detail.owner"
              maxlength="30"
              placeholder="请输入所有人"
              placeholder-style="color:#545454;font-size:14px" />
          </view>
        </view>
        <!-- <view class="line"></view> -->
        <view class="item">
          <view class="itemname">车辆类型</view>
          <view class="itemname-detail">
            <input
              class="user-input"
              type="text"
              @input="changeVinValue"
              v-model="data.detail.type"
              maxlength="30"
              placeholder="请输入车辆类型"
              placeholder-style="color:#545454;font-size:14px" />
          </view>
        </view>
        <!-- <view class="line"></view> -->
        <view class="item">
          <view class="itemname">品牌型号</view>
          <view class="itemname-detail">
            <input
              class="user-input"
              type="text"
              @input="changeVinValue"
              v-model="data.detail.model"
              maxlength="30"
              placeholder="示例：丰田牌GIM7250"
              placeholder-style="color:#545454;font-size:14px" />
          </view>
        </view>
        <!-- <view class="line"></view> -->
        <view class="item">
          <view class="itemname">
            <text class="red">*</text>
            车辆识别代码
          </view>
          <view class="itemname-detail">
            <input
              class="user-input"
              type="text"
              @input="changeVinValue"
              v-model="data.detail.vin"
              maxlength="30"
              placeholder="请输入车辆识别代码"
              placeholder-style="color:#545454;font-size:14px" />
          </view>
        </view>
        <view class="line"></view>
      </view>
      <view
        class="addcar-content"
        v-if="data.detail.drivingLicenseFront && data.detail.drivingLicenseAfter">
        <text class="title text-bold">行驶证正本</text>
        <view class="addcar-image">
          <image
            class="q-image-wrap"
            :src="data.detail.drivingLicenseFront"
            mode="scaleToFill"></image>
        </view>
        <text class="title text-bold">行驶证副页</text>
        <view class="addcar-image">
          <image
            class="q-image-wrap"
            :src="data.detail.drivingLicenseAfter"
            mode="scaleToFill"></image>
        </view>
      </view>
    </scroll-view>
    <view class="bottom-wrap" :style="styleBntH">
      <button class="bnt-wrap1 bnt" @tap="setDefault">设为默认</button>
      <button class="bnt-wrap bnt" @tap="submit" :disabled="data.btnDisable">保存</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { getSystemInfo, setToastInstance, systemInfo } from '@mixins/info';
import { checkCarRepeat, queryCarDetail, defaultCar, updateCar } from '@/service/apis/mine';
import { getItem } from '@/utils/util';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const resUrl = import.meta.env.VITE_VUE_APP_RES;
const $toast: any = inject('$Toast');

const styleBntH = `height: calc(124rpx + ${getSystemInfo().safeBottom}px)`;
let styleHeight = ref(`height: calc(100vh - (148rpx + ${getSystemInfo().safeBottom}px))`);

// #ifdef H5
styleHeight.value = `height: calc(100vh - (148rpx + ${getSystemInfo().safeBottom}px) - ${
  getSystemInfo().navHeight
}px)`;
// #endif

const data = reactive({
  id: '',
  detail: {} as any,
  btnDisable: true,
  // tempFilePathsA: `${resUrl}mine/front.png`,
  // tempFilePathsB: `${resUrl}mine/reverse.png`,
});

onLoad((option: any) => {
  data.id = option.id;
  console.log(option);
  getDetail();
});

const changePlateValue = () => {
  data.btnDisable = false;
};
const changeOwnerValue = () => {
  data.btnDisable = false;
};

const changeTypeValue = () => {
  data.btnDisable = false;
};
const changeModelValue = () => {
  data.btnDisable = false;
};
const changeVinValue = () => {
  data.btnDisable = false;
};

// 获取详情
const getDetail = () => {
  queryCarDetail({ id: data.id }, { account: { accountId: getItem('userid') } }).then(
    (res: any) => {
      console.log(res);
      if (res) {
        data.detail = res;
      }
    }
  );
};

// 设置默认
const setDefault = () => {
  defaultCar({ id: data.id }, { account: { accountId: getItem('userid') } }).then((res: any) => {
    console.log(res);
    uni.navigateBack({
      delta: 1,
    });
  });
};

const submit = () => {
  if (!data.detail.plateNumber) {
    $toast('请输入车牌号');
    return;
  }
  if (!data.detail.vin) {
    $toast('请输入车辆识别代码');
    return;
  }
  checkCarRepeat(data.detail, { account: { accountId: getItem('userid') } }).then((res: any) => {
    if (res) {
      updateCar(data.detail, { account: { accountId: getItem('userid') } }).then((res: any) => {
        console.log(res);
        if (res) {
          uni.navigateBack({
            delta: 1,
          });
          // uni.navigateTo({
          //   url: `/pagesMyCenter/chargeCar/carList`,
          // });
        }
      });
    } else {
      uni.showModal({
        content: `当前车辆已被其他用户绑定，您的操作会将前一个用户的车辆解绑，是否确认您的信息无误并提交？`,
        showCancel: true,
        success: res => {
          if (res.confirm) {
            updateCar(data.detail, { account: { accountId: getItem('userid') } }).then(
              (res: any) => {
                console.log(res);
                if (res) {
                  uni.navigateBack({
                    delta: 1,
                  });
                  // uni.navigateTo({
                  //   url: `/pagesMyCenter/chargeCar/carList`,
                  // });
                }
              }
            );
          }
        },
      });
    }
  });
};
// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}
</style>
<style lang="scss" scoped>
.addcar-wrap {
  position: relative;
  padding-top: 12px;
  background-color: #f6f8ff;
  overflow: hidden;

  .addcar-content {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 0 16px;

    .title {
      font-size: 14px;
      line-height: 24px;
      color: #000;
      margin: 12px 0 8px 0;
    }

    .item {
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      height: 56px;
      line-height: 56px;
      align-items: center;

      .itemname {
        font-size: 16px;
        color: #242424;
        white-space: nowrap;
      }

      .itemname-detail {
        margin-left: 15px;
        // width: calc(100% - 108px);
        color: #545454;
        text-align: right;
      }

      .red {
        color: $uni-color-error;
      }
    }
  }

  .addcar-content {
    // margin: 0 16px 12px 16px;
    // padding: 16px;
    // // margin-top: 12px;
    // background-color: #fff;
    // font-size: 14px;
    // color: #545454;
    // border-radius: 8px;

    // &:last-child {
    //   border: 0;
    // }

    // .title {
    //   line-height: 24px;
    //   color: #000;
    // }

    // .info {
    //   display: flex;
    //   font-size: 14px;
    //   justify-content: space-between;

    //   .left {
    //     width: 30%;
    //     color: #858585;
    //   }

    //   .right {
    //     width: 70%;
    //     text-align: right;
    //     color: #242424;
    //   }

    //   .test {
    //     line-height: 22px;
    //     margin-top: 8px;

    //     // .content-input {
    //     //   height: 25px;
    //     // }
    //   }

    //   .test1 {
    //     // .content-input {
    //     line-height: 22px;
    //     margin-top: 8px;
    //     color: #545454;
    //     // }
    //   }

    // .text-red {
    //   color: #fa3939;
    // }
    // }

    .addcar-image {
      padding: 8px 0 16px 0;

      .q-image-wrap {
        position: relative;
        width: 317px;
        height: 179px;
      }
    }

    .line {
      margin: 12px 0;
      height: 1px;
      background-color: #f2f2f2;
      // border-bottom: 1px solid #f2f2f2;
    }
  }
}

.bottom-wrap {
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 16px;
  border-top: 1px solid #f2f2f2;
  box-sizing: border-box;
  background-color: #fff;

  .bnt {
    width: 162px;
    height: 44px;
    margin-top: 9px;
    border-radius: 50px;
  }
}
</style>